﻿<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_01.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_02.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_01.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_02.png")" alt=""/>
        </li>
    </ul>
</div>
<div id="carousel" class="flexslider">
    <ul class="slides">
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_01.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_02.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_01.png")" alt=""/>
        </li>
        <li>
            <img src="@Url.Content("~/Content/Images/Banner/Wood/slider_02.png")" alt=""/>
        </li>
    </ul>
</div>

<script type="text/javascript">
    $(window).load(function() {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 210,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel",
            start: function(slider) {
                $('body').removeClass('loading');
            }
        });
    });
</script>